<template>
	<view class="outBox">
<!--		<view class="bgBox"></view>-->
<!--    <video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>-->
    <VideoBox>
      <template #content>
        <view class="infoBox">
          <view class="bgImg">
            <image :src="`${baseImgUrl}order/bg.png`" mode="scaleToFill"></image>
          </view>
          <view class="inner">
            <view class="img">
              <image :src="baseImgUrl + 'manager/logo.png'" mode="widthFix"></image>
            </view>
            <view class="text">
              <text>{{ currentTime }}</text>
              <text>夜晚场：09:00-19:00</text>
              <text class="rank">当前排队总数
                <text style="color:#0FC6C2;margin: 0 10rpx">{{ takeInfo.waitNumber || 0 }}</text>
                位
              </text>
            </view>

          </view>
        </view>
        <view class="items">
          <view class="item" :style="{
          background:`url(${itemBg})`,
          backgroundSize:'100% 100%'
				}">
            <view class="name">
              <image src="/static/order/icon5.png" mode="widthFix"></image>
              <text>当前叫号</text>
            </view>
            <view class="value">
              <text>{{ takeInfo.currentGroupNo || '-' }}</text>
            </view>
          </view>
          <view class="item" :style="{
          background:`url(${itemBg})`,
          backgroundSize:'100% 100%'
				}">
            <view class="name">
              <image src="/static/order/icon6.png" mode="widthFix"></image>
              <text>我的号码</text>
            </view>
            <view class="value">
              <text>{{ takeInfo.myGroupNo || '-' }}</text>
            </view>
          </view>
          <view class="item" :style="{
				background:`url(${itemBg})`,
				backgroundSize:'100% 100%'
								}" @click="handleShowZuJu">
            <view class="name">
              <image :src="`${baseImgUrl}order/icon7.png`" mode="widthFix"></image>
              <text>历史组局明细</text>
            </view>
            <view class="value value2">
              <text>查看详情</text>
            </view>
          </view>
        </view>
        <view class="btns">
          <view class="btn" v-if="!takeInfo.myGroupNo" @click="doSomeSthingByLogin(userLoginRef,handleTake)">
            <image :src="`${baseImgUrl}manager/icon3.png`" mode=""></image>
            <view class="inner">
              <text>取号</text>
            </view>
          </view>
          <view class="btn" v-else @click="doSomeSthingByLogin(userLoginRef,showDia)">
            <image :src="`${baseImgUrl}manager/icon4.png`" mode=""></image>
            <view class="inner active">
              <view class="text">
                <text>取消</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </VideoBox>

		<Tabbar :currentTab="1"></Tabbar>
		<userLogin ref="userLoginRef" />
		<diaBox ref="diaBoxRef" title="取消" @comfireFunc="handleCansel" content="是否确认取消" :show-btns="true">

		</diaBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight,
	} from '@/utils/index.js'

	import {
		findCurrentGroupNo,
		takeGroupNo,
		cancelGroupNo
	} from '../../api/api';
	import itemBg from "@/static/order/itemBg.png"
	import Header from '../../components/header.vue';
	import Tabbar from '../../components/tabbar.vue';
	import diaBox from "@/components/diaBox/index.vue";
  import VideoBox from "@/components/VideoBox/index.vue";

	export default {
		components: {
      VideoBox,
			diaBox,
			Header,
			Tabbar
		},
		data() {
			return {
				// 胶囊的宽度
				barWidth: 0,
				barHeight: 0,
				menuHeight: 0,
				isTake: false, // 是否取号
				takeInfo: {}, // 取号信息
				videoUrl: this.$videoUrl,
				baseImgUrl: this.$baseImgUrl,
				currentTime: '',
				userLoginRef: null,
				itemBg: itemBg,
				videoPath: "",
			}
		},
		onLoad() {
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.barHeight = obj.barHeight
			this.menuHeight = obj.menuHeight
			console.log(obj, "obj");
			this.getTakeInfo()
			this.userLoginRef = this.$refs.userLoginRef
			// 设置月日 星期几
			this.currentTime = new Date().getMonth() + 1 + '月' + new Date().getDate() + '日    ' + '星期' + (new Date()
				.getDay() == 0 ? '日' : new Date().getDay())

		},
		methods: {

			handleShowZuJu() {
				this.$u.toast("正在统计")
			},
			showDia() {
				this.$refs.diaBoxRef.show = true
			},
			// 查询取号信息
			async getTakeInfo() {
				const res = await findCurrentGroupNo()
				if (res.code == 200) {
					this.takeInfo = res.data
				}
			},
			// 取消取号
			async handleCansel() {
				const res = await cancelGroupNo()
				await this.getTakeInfo()
        this.$refs.diaBoxRef.close()
			},
			// 取号
			async handleTake() {
				const res = await takeGroupNo()
				await this.getTakeInfo()
			},
			// 查看详情
			handleDetails() {
				this.getnav("/pages/order/details")
			},
			getColor(type) {
				if (type == 1) {
					return {
						label: "竞价中",
						color: "#00FF11"
					}
				} else if (type == 2) {
					return {
						label: "竞价成功",
						color: "#EA4335"
					}
				} else {
					return {
						label: "已完成",
						color: "#B0B0B0"
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-top: 150rpx;
		position: relative;
		z-index: 999;

		.btn {
			width: 200rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(134, 180, 246, 0.25);
			position: relative;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 3;
			}

			.inner {
				position: relative;
				z-index: 5;
			}

			&:nth-child(2) {
				box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(237, 150, 148, 0.25);
			}

			text {
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}

	.items {
		margin: 0 26rpx;

		.item {
			//background: rgba(15,15,15,0.41);
			//box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(0,0,0,0.53);
			border-radius: 52rpx;
			//border: 2rpx solid #294c49;
			//backdrop-filter: blur(7px);
			margin-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			padding: 46rpx;

			.name {
				display: flex;
				align-content: center;

				text {
					font-size: 28rpx;
					line-height: 50rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
				}
			}

			.value {
				display: flex;
				align-content: center;

				text {
					color: #fff;
					font-size: 40rpx;
					font-weight: bold;
				}
			}

			.value2 {
				align-items: center;

				text {
					font-size: 28rpx;
					font-weight: bolder;
					color: #5bc7c3;
				}
			}

			image {
				width: 55rpx;
				margin-right: 40rpx;
			}
		}
	}

	.infoBox {
		width: 686rpx;
		height: 356rpx;
		margin: 0 auto 28rpx;
		overflow: hidden;
		position: relative;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 2;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.inner {
			position: relative;
			z-index: 5;
		}

		.rank {
			width: 468rpx;
			margin: 0 auto !important;
			background: #2b391b;
			line-height: 70rpx;
			border-radius: 50rpx;
		}

		.img {
			margin-top: 48rpx;
			margin-bottom: 46rpx;
			text-align: center;

			image {
				width: 238rpx;
			}
		}

		.text {
			display: flex;
			flex-direction: column;

			text {
				margin-bottom: 18rpx;
				color: #fff;
				text-align: center;

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
					font-style: normal;
				}

				&:last-child {
					margin: 0;
				}
			}
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.content {
		position: relative;
		min-height: 100vh;
		padding-bottom: 200rpx;
		z-index: 99;
	}

	.left-slot {
		color: #fff;

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.outBox {
		background-color: #242331;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;

		.name {
			color: #fff;
		}
	}
</style>
